@import url("https://use.typekit.net/ybr1qxv.css");
  

*{
    margin: 0px;
    padding: 0px;
    list-style: none;
    font-family: muli, sans-serif;
}

body {
    margin: 0;
    font-size: 17px;
    font-family: muli, sans-serif;
    background: white;
  }
  @media only screen and (max-height: 600px) {
    html,body{
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
 
  a {
    color: black !important;
    font-family: muli, sans-serif;
    font-weight: bold;
  }

  button{
    font-family: muli, sans-serif;
    font-weight: bold;
  }

  
  a:hover {
    color: black!important;
    text-decoration: none;
  }

  li{
    font-family: muli, sans-serif!important;
    font-weight: bold !important;
  }

  li:hover {
    font-family: muli, sans-serif!important;
    font-weight: bold !important;
    background-color: #6fcfff7b;
    color: rgb(0, 0, 0);
    text-decoration: none;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: muli, sans-serif;
  }
  

  /***************************
    * PRELOADER SECTION CONTENT
    *****************************/ 
  
    #preloader {
      background: rgb(255, 255, 255);
      height: 100%;
      left: 0;
      opacity: 1;
      filter: alpha(opacity=100);
      position: fixed;
      text-align: center;
      top: 0;
      width: 100%;
      z-index: 999999999;
    }
    
    .preloader {
      width: 7vw;
      height: auto;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      text-align: center;
      position: absolute;
    }

    .textLoader{
      color: gray;
      font-size: 1em;
    }
    
    .sk-cube-grid {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-left: 1vw !important;
      width: 5vw !important;
      height: 5vw !important;
    }
    
    .sk-cube-grid .sk-cube {
      width: 100% !important;
      height: 100% !important;
      background-image: url("../assets/Logo/Immersicom_Logo_Preloader.svg");
      background-position: cover !important;
      background-repeat: no-repeat;
      float: left;
      -webkit-animation: sk-cubeGridScaleDelay 3s infinite ease-in-out;
      animation: sk-cubeGridScaleDelay 3s infinite ease-in-out;
    }
    
    .sk-cube-grid .sk-cube1 {
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
    }
    
   
    @-webkit-keyframes sk-cubeGridScaleDelay {
      0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
      }
      35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
      }
    }
    
    @keyframes sk-cubeGridScaleDelay {
      0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
      }
      35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
      }
    }

    .bar{
      display:flex;
      flex-direction: column;
      height: 4vh;
      
    }

    .loader_bar  {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      margin-top: 1vh;
      width: 6.5vw;
      height: 1vh;
      background: #acacacd9;
      border-radius: 50px;
      animation: fill 15s ease;
    }

    @keyframes fill {
      0% { width: 0% }
      100% { width: 100% }
    }
  

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  position:fixed;
  width: 100%;
  height: 9vh; /*8vh;*/
  display: none;
  background: #9d9d9da1 !important;
  z-index: 600;
}

#headerTwo {
  position:fixed;
  width: 100%;
  height: 10vh; /*8vh;*/
  background: #9d9d9da1 !important;
  z-index: 600;
}

#header .logo {
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: muli, sans-serif;
}
#headerTwo .logo {
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: muli, sans-serif;
}

#header .logo a {
  color: #fff;
}

#headerTwo .logo a {
  color: #fff;
}

#header .logo img {
  max-height: 8vh;
}

#headerTwo .logo img {
  max-height: 8vh;
}


@media only screen and (max-height: 768px) {
  #productMenu {
    display: none !important;
  }
}


.warningMsg{
  padding-right: 8vw;
  padding-left: 8vw;
  margin-bottom: 5vh;
  font-family: muli, sans-serif;
  font-size: 4vw !important;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/



/* Desktop Navigation */
.nav-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu > ul {
  display: flex;
  align-items: center;
}

.nav-menu > ul > li {
  position: relative;
  white-space: nowrap;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: 1vh;
  padding-bottom: 1vh;

}

.nav-menu a {
  display: block;
  position: relative;
  color: white;
  transition: 0.3s;
  font-size: 14px;
  font-family: muli, sans-serif;
}

.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
  color:#8bb9ff;
}

.nav-menu .book-a-table a {
  border: 2px solid #cccccc;
  color: #fff;
  border-radius: 50px;
  padding: 8px 25px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  transition: 0.3s;
}

.nav-menu .book-a-table a:hover {
  background: #000f7f;
  color: #fff;
}



.nav-menu .drop-down ul {
  display: block;
  position: absolute;
  left: 15px;
  top: calc(100% + 30px);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  padding: 10px 0;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
}

.nav-menu .drop-down:hover > ul {
  opacity: 1.5;/*1;*/
  top: 5vh;
  visibility: visible;
  font-family: muli, sans-serif;
  font-weight: bold;
  
}

@media only screen and (max-height: 600px) {
  
  .nav-menu .drop-down:hover > ul {
    visibility: unset;
  }
}

.nav-menu .drop-down li {
  min-width: 180px;
  position: relative;
  font-family: muli, sans-serif;
  font-weight: bold;
}

.nav-menu .drop-down ul a {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  color: #1a1814;
  font-family: muli, sans-serif;
  font-weight: bold;
}

.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
  color: #a7caff;
}

.nav-menu .drop-down > a:after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 5px;
}

.nav-menu .drop-down .drop-down ul {
  top: 0;
  left: calc(100% - 30px);
}

.nav-menu .drop-down .drop-down:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
}

.nav-menu .drop-down .drop-down > a {
  padding-right: 35px;
}

.nav-menu .drop-down .drop-down > a:after {
  content: "\eaa0";
  font-family: IcoFont;
  position: absolute;
  right: 15px;
}

@media (max-width: 1366px) {
  .nav-menu .drop-down .drop-down ul {
    left: -90%;
  }
  .nav-menu .drop-down .drop-down:hover > ul {
    left: -100%;
  }
  .nav-menu .drop-down .drop-down > a:after {
    content: "\ea9d";
  }
}

#navBar{
  display: block !important;
}

#navBarTwo{
  display: block !important;
}


#logo2{
  width: 18vw; /*17vw;*/
  margin-top: 1vh; 
  cursor: pointer;
  margin-left: 13%;
}

.enterLogo button{
  width: 50vh !important;
  background: transparent;
  border: none;
}

#icon{
  cursor: pointer;
  font-size: 25px !important;
}


.active{
  /* visibility: visible; */
  display: block;
}
.noActive {
  /* visibility: hidden!important; */
  display: none!important;
}

  /***************************
  * NAVBAR SECTION CONTENT
  *****************************/ 
  /***************************
  #logo2{
    width: 17rem;
    margin-left: 4em;
    margin-top: 1em; 
    cursor: pointer;  

  } 

  #myMenu{
    display: none;
  }

  

  .menu{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    background: rgba(173, 173, 173, 0.5);  
    position: fixed;
    height: 93px;
    width: 100%;
    z-index: 500;
    font-family: muli, sans-serif;
    font-size:  20px;
    
  }

  .menu .enterLogo button{
      background: transparent;
      border: none;
  }
  
  
  #myMenu ul{
    display: flex;
    line-height: 46px;
    list-style: none;
    margin-right: 4em;
    align-items: center;
    padding-top: 1.5em;
    
  }

  #myMenu ul li{
    display: inline-block;
    width: 180px;
    height: 80px;
    font-family: muli, sans-serif;
  }

  #myMenu a{
    display: block;
    color: black;
    text-decoration: none;
    padding-left: 30px;
    padding-right: 30px;
    font-family: muli, sans-serif;
  }

  .dropdown {
    float: left;
    overflow: hidden;
    font-family: muli, sans-serif;
  }
  
  .dropdown .dropbtn {
    font-size: 20px;  
    border: none;
    outline: none;
    color: black;
    padding: 0px 20px;
    background-color: inherit;
    font-family: muli, sans-serif;
    
    cursor: pointer;
  }

  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #01aaff8a;
    height: 70px;
    font-family: muli, sans-serif;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(173, 173, 173, 0.8);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 9999;
    font-family: muli, sans-serif;
  }

  @media only screen and (max-height: 600px) {
    .dropdown-content {
      overflow: auto;
      height: 55vh;
    } 
  }
 
  
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-family: muli, sans-serif;

  }
  
  .dropdown-content a:hover {
    background-color: #01aaff8a;
    color: white !important;
    font-family: muli, sans-serif;
    
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
    font-family: muli, sans-serif;
  }

  
  .show {display: block;}
  .active {
    background-color: #01aaff8a!important;
    height: 70px;
  }
  @media only screen and (max-height: 600px) {
    .dropdown-content a:after {
      display: none;
    }
 
  }
  
  #icon{
    font-size: 25px !important;
  }

  *****************************/ 
 
  /* .active {
    background-color: #01aaff8a!important;
    height: 70px;
  } */
  
  /***************************
  * LOBBY SECTION CONTENT
  *****************************/ 

  .lobby{
      display: flex;
      justify-content: center;
  }

  #vidFrost{
    position: fixed;
    z-index: 0;
    overflow: hidden;  
  }
  @media (max-aspect-ratio: 16/9) {
    #vidFrost {
      width: auto;
      height: 100vh;
    }; 
  }
  @media (min-aspect-ratio: 16/9) {  
    /* #vidFrost {
      width: 100vw;
      height: auto;
    }; */
    #vidFrost {
      width: 100%;
      height: 100%;
      object-fit: cover;
    };
  }
  
  #vidLobby{
    position: fixed;
    z-index: -1;
    overflow: hidden; 
  }

  @media (max-aspect-ratio: 16/9) {
    #vidLobby {
      width: auto;
      height: 100vh;
    }   
  }

  @media (min-aspect-ratio: 16/9) {
    /* #vidLobby{
      width: 100vw;
      height: auto;
    } */
    #vidLobby {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  #vidLoop{
    position: fixed;
    z-index: -2;
    overflow: hidden;   
  }

  @media (max-aspect-ratio: 16/9) {
    #vidLoop {
      width: auto;
      height: 100vh;
    }
  }

  @media (min-aspect-ratio: 16/9) {
    /* #vidLoop{
      width: 100vw;
      height: auto;
    } */
    #vidLoop{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }


  #videoPlayer{
    position: fixed;
    z-index: -3;
    overflow: hidden;
    
  } 

  #myVideo{
    position: fixed;
    z-index: -3;
    overflow: hidden;
  } 

  @media (min-aspect-ratio: 16/9) {
    /* #myVideo {
      width: 100vw;
      height: auto;
    }; */
    #myVideo {
      width: 100%;
      height: 100%;
      object-fit: cover
    };
    #videoPlayer {
      width: 100vw;
      height: auto;
    };
  }

  @media (max-aspect-ratio: 16/9) {
    /* #myVideo {
      width: auto;
      height: 100vh;
    }; */
    #myVideo {
      width: 100%;
      height: 100%;
      object-fit: cover
    };
    #videoPlayer {
      width: auto;
      height: 100vh;
    };
  }


  .hide{
      display: none !important;
  }

  .show{
    display: block !important;
  }

  #logo{
    width: 25rem;
    margin-bottom: 1em;
  }  

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    bottom: 30%;
    color: #f1f1f1;
    width: 50em;
    padding: 20px;
    text-align:center;
    font-size: 0.7rem;
    position: fixed;
    
  }
  .content p {
    font-size: 2em; 
    line-height:30px;
  }
  @media only screen and (max-height: 600px) {
    .content {
      bottom: 7vh; 
    }
  }
  
  #btnEnter {
    width: 10vw;
    height: 6vh;
    background: #01acff;
    color: #fff;
    cursor: pointer;
    font-family: muli, sans-serif;
    font-size: 3vh;
    border: 2px solid #a2dffd;
    margin-top: 1em;
    text-decoration: none;
    text-align: center;
    border-radius: 35px;
  }
  @media only screen and (min-width: 600px) {
    #btnEnter {
      margin-top: 2vh;
    }
  }
  
  #btnEnter:hover {
    background: #48c2ff;
    color: #ffffff;
  }


/***************************************
* PLAY BUTTON RE-PLAY FOR EACH SCENE
***************************************/  

  .btnPlay {
    position: fixed;
    z-index: 2;
    top: 50vh;
    left: 47vw;
    display: none;
  }
  .btnPlay button{
    cursor: pointer;
    border: none;
    background: none;
  }
  .btnPlay button img{ 
    width: 100px; /*50%;*/
    height: auto;
  }

  @media only screen  and (min-width : 1824px) {
    .btnPlay button img{ 
      width: 100%;
    }  

  }
  @media only screen  and (max-height : 480px){
    .btnPlay button img{ 
      width: 20%;
    }  
  }

  
/***************************************
* SOUND BUTTON AND EXPANDABLE BUTTONS 
***************************************/  
@keyframes pulse-white {
  0% {
    transform: scale(0.95);
  }

  70% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.95);
  }
}

#sound-section{
  display: none;
}

.btnSound{
  position: fixed;
  float:left;  
  margin-top: 72vh;
  margin-left: 27vw;
  width: 2vw;
  height: auto;
  cursor: pointer;
  z-index: 8;
  opacity: 0.75;

  list-style: none;
  transition: ease-in-out all .2s;
  border-radius: 32px;

}
.btnSound img{
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.809);
  animation: pulse-white 1.5s infinite;
}


.btnExpand{
  position: fixed;
  float:left;  
  margin-top: 70.5vh;
  margin-left: 65vw;
  width: 2vw;
  height: auto;
  cursor: pointer;
  z-index: 8;
  opacity: 0.75;

  list-style: none;
  transition: ease-in-out all .2s;
  border-radius: 32px;

}
.btnExpand img{
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.809);
  animation: pulse-white 1.5s infinite;
}


/**Lobby**/
@media (max-aspect-ratio: 16 / 9){
  .Lobby#sound-section .btnSound{
    margin-top: 77vh;
    margin-left: 10vw;
  }
  .Lobby#sound-section .btnExpand{
    margin-top: 65vh;
    margin-left: 47vw;
  }
}
@media (min-aspect-ratio: 16 / 9){
  .Lobby#sound-section .btnSound{
    margin-top: 78vh;
    margin-left: 10vw;
  }
  .Lobby#sound-section .btnExpand{
    margin-top: 66vh;
    margin-left: 47vw;
  }
}

/**Animation**/
@media (max-aspect-ratio: 16 / 9){
  .Animation#sound-section .btnSound{
    margin-top: 74vh;
    margin-left: 27vw;
  }
  .Animation#sound-section .btnExpand{
    margin-top: 72vh;
    margin-left: 68vw;
  }
}
@media (min-aspect-ratio: 16 / 9){
  .Animation#sound-section .btnSound{
    margin-top: 74vh;
    margin-left: 27vw;
  }
  .Animation#sound-section .btnExpand{
    margin-top: 72vh;
    margin-left: 68vw;
  }
}


/**Gamification**/
@media (max-aspect-ratio: 16 / 9){
  .Gamification#sound-section .btnSound{
    margin-top: 47vh;
    margin-left: 19vw;
  }
  .Gamification#sound-section .btnExpand{
    margin-left: 52vw;
    margin-top: 50vh;
  }
}
@media (min-aspect-ratio: 16 / 9){
  .Gamification#sound-section .btnSound{
    margin-top: 49.5vh;
    margin-left: 19vw;
  }
  .Gamification#sound-section .btnExpand{
    margin-left: 52.5vw;
    margin-top: 53vh;
  }
}

/**Interactive**/
@media (max-aspect-ratio: 16 / 9){
  .Interactive#sound-section .btnSound{
    margin-top: 64vh;
    margin-left: 17.5vw;
  }
  .Interactive#sound-section .btnExpand{
    margin-left: 46vw;
    margin-top: 66vh;
  }
}
@media (min-aspect-ratio: 16 / 9){
  .Interactive#sound-section .btnSound{
    margin-top: 68vh;
    margin-left: 17.5vw;
  }
  .Interactive#sound-section .btnExpand{
    margin-left: 46vw;
    margin-top: 70vh;
  }
}

/**EngagementCenters**/
@media (max-aspect-ratio: 16 / 9){
  .EngagementCenters#sound-section .btnSound{
    margin-top: 66vh;
    margin-left: 17vw;
  }
  .EngagementCenters#sound-section .btnExpand{
    margin-top: 61vh;
    margin-left: 65vw;
  }
}
@media (min-aspect-ratio: 16 / 9){
  .EngagementCenters#sound-section .btnSound{
    margin-top: 66vh;
    margin-left: 17vw;
  }
  .EngagementCenters#sound-section .btnExpand{
    margin-top: 62vh;
    margin-left: 65vw;
  }
}

/**VirtualReality**/
@media (max-aspect-ratio: 16 / 9){
  .VirtualReality#sound-section .btnSound{
    margin-top: 72vh;
    margin-left: 22vw;
  }
  .VirtualReality#sound-section .btnExpand{
    margin-top: 48vh;
    margin-left: 56vw;
  }
}
@media (min-aspect-ratio: 16 / 9){
  .VirtualReality#sound-section .btnSound{
    margin-top: 72vh;
    margin-left: 22vw;
  }
  .VirtualReality#sound-section .btnExpand{
    margin-top: 48vh;
    margin-left: 56vw;
  }
}

/**AugmentedReality**/
@media (max-aspect-ratio: 16 / 9){
.AugmentedReality#sound-section .btnSound{
  margin-top: 52vh;
  margin-left: 14vw;
}
.AugmentedReality#sound-section .btnExpand{
  margin-top: 40vh;
  margin-left: 48vw;
}
}
@media (min-aspect-ratio: 16 / 9){
.AugmentedReality#sound-section .btnSound{
  margin-top: 52vh;
  margin-left: 14vw;
}
.AugmentedReality#sound-section .btnExpand{
  margin-top: 40vh;
  margin-left: 48vw;
}
}

/***************************************************************
* NEW SOUND AND FULL-SCREEN BUTTONS MANNAGE BY SECTION NAME
****************************************************************/ 

@media only screen  and (max-height : 480px){
  .Lobby#sound-section .btnSound{
    margin: 21em 6em;
  }
  .Lobby#sound-section .btnExpand{
    margin: 17em 29em;
  }

  .Animation#sound-section .btnSound{
    margin: 20em 18em;
  }
  .Animation#sound-section .btnExpand{
    margin: 19.7em 40em;
  }

 
  .Gamification#sound-section .btnSound{
    margin: 12em 12em;
  }
  .Gamification#sound-section .btnExpand{
    margin: 13em 31em;
  }

  .Interactive#sound-section .btnSound{
    margin: 18em 12em;
  }
  .Interactive#sound-section .btnExpand{
    margin: 18.7em 27em;
  }

  .EngagementCenters#sound-section .btnSound{
    margin: 17em 12em;
  }
  .EngagementCenters#sound-section .btnExpand{
    margin: 16em 38em;
  }

  .VirtualReality#sound-section .btnSound{
    margin: 19em 14em;
  }
  .VirtualReality#sound-section .btnExpand{
    margin: 11em 33em;
  }

  .AugmentedReality#sound-section .btnSound{
    margin: 12em 9em;
  }
  .AugmentedReality#sound-section .btnExpand{
    margin: 9em 29em;
  }

}


/***************************
* CARD SECTION CONTENT
*****************************/ 

#card-section{
  display:none;
}
@media only screen  and (max-height : 600px){
  #card-section{
    overflow: hidden;
    overflow-y: hidden;
    overflow-x: hidden;
  }  
}

.card_item {
 /* display: flex;*/
  position: absolute;
  width: 27vw;
  height: 43vh;
  opacity: 1;/*0.95; , 0.8*/
  top: 12%; /*40%;*/
  right:2.7em; /*2em;*/
  transform: rotate3d(0, 3, 1.5, 0deg);
}

.card_item img{
  width: 100%;
  height: auto;
}

.card_item .textCard{  
  position: absolute;
  width: 75%;
  /* width: 80%; */
  font-family: muli, sans-serif;
  font-weight: bold;
  line-height: 1.5em; /*2em;*/
  color: #ffffff;
  top: 0;
  margin: 2em 4em;
}
.card_item .textCard #disclaimer{
  font-size: 0.65vw;
}
.card_item .textCardTitle{
  position: absolute;
  top:0;
  left: 1em;
  color: #ffffff;
  font-size: 2vw;/*4vh*/
  line-height: 1em;
  font-family: muli, sans-serif!important;
  font-weight: bold !important;
  padding-top: 1vh;
  padding-left: 2vw;
  margin-bottom: 0!important;
}
@media only screen and (max-height : 480px) {
  .card_item .textCard{  
    line-height: 2em;
  }
}
/* ===========================================
* CUSTOM CSS FOR EACH SECTION
==============================================*/ 

/***************************************
* ANIMATION SECTION
***************************************/  
.Animation .card_item .textCard{
  margin: 5em 4em;
} 
.Animation.btnPlay {
  top: 50vh;
  left: 45vw;
}
@media only screen and (max-height : 480px) {
  .Animation .card_item{ 
    top: 15%;
  }
  .Animation.btnPlay{ 
    top: 33vh;
    left: calc(100% - 91vw);
  }  
}

/***************************************
* GAMIFICATION SECTION
***************************************/  
.Gamification.btnPlay {
  top: 36vh;
  left: 36vw
}
.Gamification .card_item{}
.Gamification .card_item .textCard{ 
  margin: 5em 4em;
}

@media only screen and (max-height : 480px) {
  .Gamification.btnPlay {
    top: 20vh;
    left: calc(100% - 100vw);
  }  
  .Gamification .card_item{
    top: 15%;
  }
}

/***************************************
* VIRTUAL-PRODUCT SECTION
***************************************/  

.VirtualProduct .card_item{
  width: 37vw;
}
.VirtualProduct .card_item .textCard{ 
  /* margin-left: 4.5em; */
  margin: 6em 4.5em;
}
@media only screen and (max-height : 480px) {
  .VirtualProduct .card_item{
    width: 35vw;
    top: 15%;/*22vh;*/
  }  
}

/***************************************
* INTERACTIVE SECTION
***************************************/  

.Interactive.btnPlay{
  top: 50vh;
  left: 30vw
}
.Interactive .card_item .textCard {
  margin: 5em 4em;
}
@media only screen and (max-height : 480px) {
  .Interactive .card_item{
    top: 15%;
  }
  .Interactive.btnPlay{
    top:35vh;
    left: calc(100% - 106vw);
  }  
}

/***************************************
* ENGAGEMENT-CENTER SECTION
***************************************/  
.EngagementCenters.btnPlay{
  top: 43vh;
  left: 42vw
}
.EngagementCenters .card_item{
  width: 32vw;
  /* top:33%; */
}
.EngagementCenters .textCard {
  margin: 6em 4em;
}
.EngagementCenters .textCardTitle{
  font-size: 1.7vw;
  padding-top: 1.8vh;
}
@media only screen and (max-height : 480px) {
  .EngagementCenters.btnPlay{
    top:25vh;
    left: calc(100% - 96vw);
  } 
  .EngagementCenters .card_item{
    top:15%;
  }  
}

/***************************************
* VIRTUAL-EXHIBITS SECTION
***************************************/  
.VirtualExhibits.btnPlay {
  top: 50vh;
  left: 47vw
}
.VirtualExhibits .card_item{}
.VirtualExhibits .textCard {
  margin: 5em 4em;
}
.VirtualExhibits .textCardTitle{
  padding-top: 1.8vh !important;
}
@media only screen and (max-height : 480px) {
  .VirtualExhibits .card_item{
    top:15%;
  }
}

/***************************************
* VIRTUAL-REALITY SECTION
***************************************/  
.VirtualReality.btnPlay {
  top: 35vh;
  left: 35vw
}
.VirtualReality .card_item{
  width: 30vw;/*33vw;*/
  /* top:30%; */
}
.VirtualReality .textCard {
  margin: 6em 4em;
}
@media only screen and (max-height : 480px) {
  .VirtualReality.btnPlay {
    top:15vh;
    left: calc(100% - 100vw);
  } 
  .VirtualReality .card_item{
    width: 31vw;
    top:15%;
  } 
}

/***************************************
* AUGMENTED-REALITY SECTION
***************************************/  
.AugmentedReality.btnPlay {
  top: 20vh;
  left: 28vw
}
.AugmentedReality .textCard {
  margin: 5em 4em;
}
@media only screen and (max-height : 480px) {
  .AugmentedReality.btnPlay {
    top:9vh;
    left: calc(100% - 108vw);
  }  
  .AugmentedReality .card_item{
    top:15%;
  } 
}



/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .textCard {
    font-size: 1vw;/*10px*/
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .textCard {
    font-size: 1.05vw; /*15px;*/
  }
} 

 

@media only screen and (min-width: 1920px) {
  .textCard {
    font-size: 20px;
  }
} 

@media only screen and (min-width: 3840px) {
  .textCard {
    font-size: 40px;
  }
} 

/***************************
* BACK OR NEXT BUTTOS
*****************************/ 
.backOrNext {
  position: fixed;
  text-align: center;
  z-index: 3;
  display: none;
  font-size: 1vw;
}
.backOrNext .btnBack {
  position: fixed;
  width: 8.5vw;
  height: 4vh;
  left: 3em;
  top: 90vh;
  background-color: #058AE8;
  border: none;
  color: white;
  text-decoration: none;
  cursor: pointer;
  border-radius: 5px;
}
.backOrNext .btnNext {
  position: fixed;
  width: 8.5vw;
  height: 4vh;
  right: 3em;
  top: 90vh;
  background-color: #058AE8;
  border: none;
  color: white;
  text-decoration: none;
  cursor: pointer;
  border-radius: 5px;
}

@media only screen and (max-height: 480px) {
  .backOrNext .btnBack {
    width: 9vw;
    height: 5vh;
    top: 70vh;
  }
  .backOrNext .btnNext {
    width: 9vw;
    height: 5vh;
    top: 70vh;
  }
}

/***************************
* FOOTER
*****************************/ 


#footer{
  position: fixed;
  text-align: center;
  width: 100%;
  color: white;
  z-index: 800;
  bottom: 0.5em;
}

.immersicom{
  margin-bottom: 0 !important; 
}

@media only screen and (max-height: 600px) {
  #footer{
    bottom: 2vh;
    /* display: none; */
  }
}



/*********************************
* CONTACT FORM MODAL
*********************************/
#logo3{
  width: 35rem;  
  cursor: pointer;
  margin-bottom: 3em;  
}
#logoForm{
  width: 15rem;
  cursor: pointer;  
}

.contactLogo{
  display: flex;
  justify-content: center;
  visibility: hidden;
}
.contactLogo h1{
  font-size: 58px;
  cursor: pointer;
}
.contactLogo h1:hover{
  color: #48c2ff;
}

#logo4{
  width: 30%;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.modal-dialog{
  max-width: 50vw !important;
  max-height: 60vh !important;
  z-index: 600 !important;
  margin-top: 7em !important;
}

.modal-footer {
  justify-content: center !important;
} 

.contact .info {
  width: 100%;
}

.contact .info i {
  font-size: 20px;
  float: left;
  width: 44px;
  height: 44px;
  background: #eeeded;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}

.contact .info h4 {
  padding: 0 0 0 60px;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
  font-family: "Lato", sans-serif;
}

.contact .info p {
  padding: 0 0 0 60px;
  margin-bottom: 0;
  font-size: 14px;
  color: #bab3a6;
}

.contact .info .open-hours, .contact .info .email, .contact .info .phone {
  margin-top: 40px;
}

.contact .php-email-form {
  width: 100%;
}

.contact .php-email-form .form-group {
  padding-bottom: 8px;
}

.contact .validate {
  display: none;
  color: red;
  margin: 0 0 15px 0;
  font-weight: 400;
  font-size: 13px;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  text-align: center;
  padding: 15px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #01aaff8a;
  border-top-color: #1a1814;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input, .contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  border-color: #01aaff8a;
  color: #1a1814;
}

.contact .php-email-form input::-webkit-input-placeholder, .contact .php-email-form textarea::-webkit-input-placeholder {
  color: #a49b89;
}

.contact .php-email-form input::-moz-placeholder, .contact .php-email-form textarea::-moz-placeholder {
  color: #a49b89;
}

.contact .php-email-form input:-ms-input-placeholder, .contact .php-email-form textarea:-ms-input-placeholder {
  color: #a49b89;
}

.contact .php-email-form input::-ms-input-placeholder, .contact .php-email-form textarea::-ms-input-placeholder {
  color: #a49b89;
}

.contact .php-email-form input::placeholder, .contact .php-email-form textarea::placeholder {
  color: #a49b89;
}

.contact .php-email-form input:focus, .contact .php-email-form textarea:focus {
  border-color: #01aaff8a;
}

.contact .php-email-form input {
  height: 44px;
}

.contact .php-email-form textarea {
  padding: 10px 12px;
}

.contact .php-email-form button[type="submit"] {
  background: #01aaff8a;
  border: 0;
  padding: 10px 35px;
  color: #fff;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type="submit"]:hover {
  background: #beddfae5
}



.email{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.mailIcon{
  color: white;
  font-size: 20px;
  padding: 1em;
  background-color:#48c2ffaf;
  border-radius: 50%;
  margin-right: 2vh;
}

.textMail{
  padding-top: 1em;
  font-family: muli, sans-serif;
  font-weight: bold;
  color: #a49b89;
}




/****************************
* LANDSCAPE WARNING MESSAGE
*****************************/
#warning-message {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  text-align: center;
  background: #ffffff!important;
 
}
#warning-message p{
  padding:  23vh 0 0 0;
  font-size: 60px;
  font-weight: bold;
}

#warning-message #logo{
  width: 100%;
  height: 22%;
  background: url(../assets/Logo/Immersicom_Logo_Black.svg) no-repeat;
  background-size: 80%;
  background-position: 45% 30%;
}
#warning-message #device {
  width: 100%;
  height: 14%;
  background: url(../assets/Logo/deviceExperience.svg) no-repeat;
  background-size: 60%;
  background-position: 50% 0;
}
#wrapper { display:block; }
#warning-message { display:none; } 


/****************************
* NEWS SECTION
*****************************/
.news {
  position: absolute;
  bottom: -8vh;
  width: 100%;
  height: auto;
  padding:1%;  
  display: none;
}

/****************************
.news .flex-container {
  padding: 5px;
  margin: 0;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-between;
}

.news .flex-container .flex-item {
  background: tomato;
  padding: 5px;
  width: 23%;
  height: 150px;
  margin-top: 10px;
  
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
****************************/




.rowNews > .columnNews {
  padding: 0 8px;
}

.rowNews:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.columnNews {
  float: left;
  width: 20%;
  cursor: pointer;
}

/* The Modal (background) */
.modalNews {
  display: none;
  position: fixed;
  z-index: 800!important;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; 
}
@media only screen and (max-height: 600px) {
  .modalNews {
    padding-top: 11vh;
  }
}

/* Modal Content */
.modal-content-news {
  position: relative;
  margin: auto;
  padding: 0;
  width: 65%; /*90%;*/
  max-width: 1200px;
}
@media only screen and (max-height: 600px) {
  .modal-content-news {
    width: 50%;
  }
}

/* The Close Button */
.close-news-org {
  position: absolute;
  z-index: 1;
  color: white;
  background-color: #058AE8;
  border-radius: 1vw;
  width: 1.5vw;
  height: 1.5vw;
  top: 4vh;
  right: 1vw;
  /* padding-top: 10px; */
  font-size: 1.5vw;
  font-weight: bold;
  margin-right: 3vw;
  line-height: 1vw;/*20px;*/
  padding: 5px 0 0 0; 
  text-align: center;
}
/*new close-news button */
.close-news {
  position: absolute;
  z-index: 1;
  top: 3.5vh;
  right: 2.5vw;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 5px solid #058AE8;
  border-radius: 1vw;
  background:
      linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#fff 45%,#fff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
      linear-gradient(135deg, #058AE8 0%,#058AE8 43%,#fff 45%,#fff 55%,#058AE8 57%,#058AE8 100%);
}


@media only screen and (max-height: 480px) {
  .close-news {
    top: 10px;
    margin-right: -5px;

    width: 5%;
    height: 7%;
    border-radius: 15px;
  }
}


.close-news:hover,
.close-news:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlidesNews {
  display: none;
}


/* Next & previous buttons */
.prev-news,
.next-news {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next-news {
  right: 2vw;
  border-radius: 3px 0 0 3px;
}


/* Position the "next button" to the right */
.prev-news {
  left: 2vw;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev-news:hover,
.next-news:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numberNews {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  margin-top: 3vh;
  margin-left: 3vw;
}
@media only screen and (max-height: 600px) {
  .numberNews {
    margin-top: 1vh;
  }
}

/* Caption text */
.caption-container-news {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.news {
  opacity: 0.6;
}

.active,
.news:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.thumbnailImage{
  width: 100%;
}

.linkNews{
  cursor: pointer;
  color: black;
  font-family: muli, sans-serif;
  font-weight: bold;
  font-size: 1.5vh;
  padding: 8px 12px;
  position: absolute;
  bottom: 3vh;
  right: 4vw
}


/************************************
* MODAL SINGLE FULL VIDEO
*************************************/
.modalSingleVideo {
  display: none;
  position: fixed;
  z-index: 800!important;
  padding-top: 100px;
  left: 0;
  top: 2vh;
  width: 100%;
  height: 100%;
  overflow: auto; 
  /* background: url(/assets/Icons/news/Base_White.svg) no-repeat;
  background-position: center;
  background-size:65% auto; */
}
@media only screen and (max-height: 600px) {
  .modalSingleVideo {
    padding-top: 11vh;
  }
}

/* Modal Content */
.modal-content-video {
  position: relative;
  margin: auto;
  padding: 0;
  width: 65%; /*90%;*/
  max-width: 1200px;
}
@media only screen and (max-height: 600px) {
  .modal-content-video {
    width: 50%;
  }
}

/* The Close Button */

.close-fullVideo-org {
  position: absolute;
  z-index: 1;
  color: white;
  background-color: #058AE8;
  border-radius: 1vw;
  width: 1.5vw;
  height: 1.5vw;
  top: 4vh;
  right: 1vw;
  font-size: 1.5vw;
  font-weight: bold;
  margin-right: 3vw;
  line-height: 1vw;/*10px;*/
  text-align: center;
  padding: 2px 0 0 0px;
}
/*new close-fullVideo button */
.close-fullVideo {
  position: absolute;
  z-index: 1;
  top: 3.5vh;
  right: 2.5vw;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 5px solid #058AE8;
  border-radius: 1vw;
  background:
      linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#fff 45%,#fff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
      linear-gradient(135deg, #058AE8 0%,#058AE8 43%,#fff 45%,#fff 55%,#058AE8 57%,#058AE8 100%);
}

.close-fullVideo:hover,
.close-fullVideo:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}
@media only screen and (max-height: 480px) {
  .close-fullVideo {
    top: 15px;
    margin-right: 10px;

    width: 5%;
    height: 7%;
    border-radius: 15px;
    /* font-size: 2vw;
    padding: 5px 0 0 0; */
  }
}

/* Hide the slides by default */
.mySingleFullVideo{
  position: relative;
  width: 100%;
  height: auto;
}
.mySingleFullVideo video{
  width: 90%;
  height: auto;
  position: absolute;
  left: 4.7%;
  top: 14%;
}
.mySingleFullVideo img{
  width: 100%;
  height: auto;
}